<!DOCTYPE html>
<html>
  <head>
    <title>注册账号</title>
    <link rel='stylesheet ' href='/stylesheets/zhuce.css' />
  </head>
  <body>
 <div id="root">
      <img src="/images/1504057677996323.gif" id="dimg">
      <div id="yuan">
        
      
    <form id="fom" action="/zhuce/handler" method="post" ">
      <p class="gly">会员注册</p>
      <P class="p1">注册JOINFIT，发现运动的美</P>
      <table >
        <tr style="height:100px " >
      <label for="userName"></label>
      <input type="text" name="a_name" id="Mingzi" placeholder="用户名：(6-10个字符)" onblur="wdName(this.value);"><hr>
      <span id="userNameInfo"></span><br>
    </tr>

      <label for="Mima1"></label>
      <input type="password" name="a_pass" id="Mima1" placeholder="密码：(6-12个字符)" onblur="wdPass(this.value);"><hr>
      <span id="MimaInfo"></span><br>

      <span class="pwdstrength" id="ruo">弱</span>
      <span class="pwdstrength" id="zhong">中</span>
      <span class="pwdstrength" id="qiang">强</span><br>

      <label for="Mima2"></label>
      <input type="password" id="Mima2" placeholder="确认密码：" onblur="wdPassOk(this.value);"><hr>
      <span id="MimaOk"></span><br>

      <label for="Phone"></label>
      <input type="text" name="a_phone" id="Dianhua" placeholder="电话号码: " onblur="wdPhone(this.value);"><hr>
      <span id="PhoneInfo"></span><br>

      <label for="Sex"></label>
      <input id="sexnan" type="radio" value="男" name="a_sex" checked="true">男</input>  
      <input id="sexnv" type="radio" value="女" name="a_sex">女</input><br>
      <span id="SexInfo"></span><br>

      <input id="ss" type="button" value="确定注册"><input type="reset" value="重置" id="dl"><br>
      <a href="/login">已有账号？直接登录</a>

    </form>
    </div>
    </div>
    <script>


      

var ss=document.getElementById("ss");//注册按钮
var fom=document.getElementById("fom");//页面数据

ss.onclick=function (){//当有false返回false
   if(!wdName())return false; 
   if(!wdPass())return false;
   if(!wdPassOk())return false;
   if(!wdPhone())return false;

fom.submit();//手动提交

}
      //验证密码强弱
        function pwdValidate() {
            var password = document.getElementById("Mima1").value;
            if (password.length > 5 && password.length <= 8) {
                return -1;
            }
            else if (password.length > 8 && password.length <= 10) {
                return 0;
            }
            else if (password.length > 10 && password.length <= 12) {
                return 1;
            }
        }

     //焦点移走用户名框
        function wdName(Mingzi) {
            var username = document.getElementById("Mingzi").value;
            if (username == null || username == "") {
                userNameInfo.innerHTML = "用户名输入不能为空";
                return false;
            }else if (username.length >= 6 && username.length <= 10) {
                userNameInfo.innerHTML = "用户名可用";
                return true;
            }else {
                userNameInfo.innerHTML = "用户名字符为6-10";
                return false;
            }
        }
        //焦点移走密码框
        function wdPass(Mima1) {
            var pswd = document.getElementById("Mima1").value;
            if (pswd == null || pswd == "") {
                MimaInfo.innerHTML = "密码输入不能为空";
                return false;
            }else if (pswd.match(/[^A-Za-z0-9]/ig)) {
                MimaInfo.innerHTML = "密码必须为数字或字母";
                return false;
            }else if (pswd.length >= 6 && pswd.length <= 12){
                if (pwdValidate() == -1) {
                    ruo.style.backgroundColor = "red";
                    zhong.style.backgroundColor = "#fff";
                    qiang.style.backgroundColor = "#fff";
                }
                else if (pwdValidate() == 0) {
                    ruo.style.backgroundColor = "#fff";
                    zhong.style.backgroundColor = "#e6ff00";
                    qiang.style.backgroundColor = "#fff";
                }
                else if (pwdValidate() == 1) {
                    ruo.style.backgroundColor = "#fff";
                    zhong.style.backgroundColor = "#fff";
                    qiang.style.backgroundColor = "#2ffd06";
                }
                MimaInfo.innerHTML = "密码可用";
                return true;
            }else{
                MimaInfo.innerHTML = "密码字符为6-12";
                return false;
            }
        }
        //焦点移走确认密码框
        function wdPassOk(Mima2) {
            var password = document.getElementById("Mima1").value;
            var password1 = document.getElementById("Mima2").value;
            if (password == null || password == "") {
                MimaOk.innerHTML = "密码输入不能为空";
                return false;
            }
            else if (password != password1) {
                MimaOk.innerHTML = "两次输入的密码不一致";
                return false;
            }
            else {
                MimaOk.innerHTML = "输入正确";
                return true;
            }
        }

        //焦点移走确认电话框
        function wdPhone(Dianhua){
          var phone = document.getElementById("Dianhua").value;
           if (phone == null || phone == "") {
                PhoneInfo.innerHTML = "电话输入不能为空";
                return false;
            }
            else if (phone.length == 11) {
                PhoneInfo.innerHTML = "电话可用";
                return true;
            }else{
                PhoneInfo.innerHTML = "电话输入错误";
                return false;
            }
        }
    </script>
  </body>
</html>